import { ProForm, ProFormInstance, ProFormItem, ProFormRadio } from '@/components/Pro';
import { useIntl } from '@@/exports';
import { Col, Input, Row } from 'antd';
import React, { useEffect, useRef } from 'react';

type IProps = {
  baseInfo: API.DeviceManagerDTO | undefined;
  deviceType: string | undefined;
};
const BaseInfo: React.FC<IProps> = (props) => {
  const intl = useIntl();
  const { baseInfo, deviceType } = props;
  const formRef = useRef<ProFormInstance>(null);
  useEffect(() => {
    formRef?.current?.setFieldsValue(baseInfo);
  }, [baseInfo]);
  return (
    <>
      <ProForm
        formRef={formRef}
        layout={'horizontal'}
        disabled={true}
        submitter={false}
        colon={false}
        labelCol={{
          span: 8,
        }}
      >
        <Row gutter={24}>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.model' })}
              rules={[
                {
                  required: true,
                },
              ]}
              name={'deviceModel'}
            >
              <Input></Input>
            </ProFormItem>
          </Col>
          <Col span={12}>
            <ProFormItem
              label={intl.formatMessage({ id: 'device.manufacturer' })}
              rules={[
                {
                  required: true,
                },
              ]}
              name={'manufacturer'}
            >
              <Input></Input>
            </ProFormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <ProFormRadio.Group
              name={deviceType === 'PCS' ? 'pcsType' : 'type'}
              label={intl.formatMessage({ id: 'device.type' })}
              required={true}
              options={[
                {
                  label:
                    deviceType === 'PCS'
                      ? intl.formatMessage({
                          id: 'systemManagement.deviceManagementMenu.stringType',
                        })
                      : intl.formatMessage({
                          id: 'baseInfo.air',
                        }),
                  value: 1,
                },
                {
                  label:
                    deviceType === 'PCS'
                      ? intl.formatMessage({
                          id: 'systemManagement.deviceManagementMenu.centralized',
                        })
                      : intl.formatMessage({
                          id: 'baseInfo.liquid',
                        }),
                  value: 2,
                },
              ]}
            />
          </Col>
          <Col span={12}>
            <ProFormRadio.Group
              name="status"
              label={intl.formatMessage({ id: 'device.status' })}
              required={true}
              options={[
                {
                  label: intl.formatMessage({ id: 'alarmManagement.generalProcedure.enable' }),
                  value: true,
                },
                {
                  label: intl.formatMessage({ id: 'alarmManagement.generalProcedure.disable' }),
                  value: false,
                },
              ]}
            />
          </Col>
        </Row>
        {/*<Row gutter={24}>*/}
        {/*  <Col span={12}>*/}
        {/*    <ProFormItem*/}
        {/*      label={'上市时间'}*/}
        {/*      rules={[*/}
        {/*        {*/}
        {/*          required: true,*/}
        {/*        },*/}
        {/*      ]}*/}
        {/*      name={'listingDay'}*/}
        {/*    >*/}
        {/*      <Input></Input>*/}
        {/*    </ProFormItem>*/}
        {/*  </Col>*/}
        {/*  <Col span={12}>*/}
        {/*    <ProFormItem*/}
        {/*      label={'备注说明'}*/}
        {/*      rules={[*/}
        {/*        {*/}
        {/*          required: true,*/}
        {/*        },*/}
        {/*      ]}*/}
        {/*      name={'remark'}*/}
        {/*    >*/}
        {/*      <Input></Input>*/}
        {/*    </ProFormItem>*/}
        {/*  </Col>*/}
        {/*</Row>*/}
        {deviceType !== 'PCS' && (
          <>
            <Row gutter={24}>
              <Col span={12}>
                <ProFormItem
                  label={intl.formatMessage({ id: 'device.stackCount' })}
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                  name={'bmsNum'}
                >
                  <Input></Input>
                </ProFormItem>
              </Col>
              <Col span={12}>
                <ProFormItem
                  label={intl.formatMessage({ id: 'device.clustersPerModule' })}
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                  name={'clusterPerBms'}
                >
                  <Input></Input>
                </ProFormItem>
              </Col>
            </Row>

            <Row gutter={24}>
              <Col span={12}>
                <ProFormItem
                  label={intl.formatMessage({ id: 'device.modulesPerCluster' })}
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                  name={'bmuPerBms'}
                >
                  <Input></Input>
                </ProFormItem>
              </Col>
              <Col span={12}>
                <ProFormItem
                  label={intl.formatMessage({ id: 'device.cellsPerModule' })}
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                  name={'cellPerBmu'}
                >
                  <Input></Input>
                </ProFormItem>
              </Col>
            </Row>
          </>
        )}
        <Row gutter={24}>
          <Col span={12}>
            <ProFormItem
              required={true}
              name={'photo'}
              label={intl.formatMessage({ id: 'device.image' })}
            >
              <img src={baseInfo?.pictureDir} />
            </ProFormItem>
          </Col>
        </Row>
      </ProForm>
    </>
  );
};
export default BaseInfo;
